<template>
  <div class="login">
    <div class="boxShadow">
      <div class="loginForm">
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item prop="userId">
            <el-input
              v-model.trim="form.userId"
              prefix-icon="el-icon-user"
              class="userinput"
              type="text"
              placeholder="登录账号"
              @keyup.enter.native="onSubmit('form')"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model.trim="form.password"
              prefix-icon="el-icon-lock"
              class="userinput"
              :type="passwordType"
              placeholder="登录密码"
              @keyup.enter.native="onSubmit('form')"
            />
            <i
              class="hidePasswordIcon"
              :class="isHidePassword"
              @click="changePasswordHide"
            />
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="automaticlogin"> 自动登录 </el-checkbox>
            <span class="forgot-password" @click="getRegistTag(false)"
              >忘记密码</span
            >
          </el-form-item>
          <el-form-item>
            <a class="loginbtn" href="javascript:" @click="onSubmit('form')"
              >登录</a
            >
          </el-form-item>
          <el-form-item>
            <span class="forgot-password" @click="getRegistTag(true)"
              >注册账号</span
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { login } from "@/api/user";

export default {
  components: {},
  data() {
    return {
      automaticlogin: false,
      form: {
        userId: "",
        password: "",
      },
      /**
       *表单创建规则
       */
      rules: {
        userId: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          // { validator: judgeUserName, trigger: 'blur' }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
      passwordType: "password", // 登录密码的显示与隐藏
      isHidePassword: "hidePassword",
    };
  },
  computed: {
    ...mapState({
      // title: state => state.global.title
    }),
  },
  watch: {},
  mounted() {
    this.keepLogin();
  },
  methods: {
    // ...mapActions(['login']),
    bortherMethods(name) {
      this.form.userId = name;
    },
    /** 隐藏显示密码 */
    changePasswordHide() {
      this.passwordType = this.passwordType === "text" ? "password" : "text";
      this.isHidePassword =
        this.isHidePassword === "showPassword"
          ? "hidePassword"
          : "showPassword";
    },
    getRegistTag(val) {
      this.$emit("getRegistTag", val);
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loginFn();
        } else {
          return false;
        }
      });
    },
    loginFn() {
      login({
        name: this.form.userId,
        password: this.form.password,
      })
        .then((res) => {
          // 点击记住用户名，将用户名保存下来
          if (this.automaticlogin === true) {
            this.setLogin(this.form);
          }

          localStorage.setItem("automaticlogin", this.automaticlogin);
          localStorage.setItem("userData", JSON.stringify(res.data[0]));
          this.$router.push("/home");
        })
        .catch(() => {});
    },
    keepLogin() {
      let userId = localStorage.getItem("userId");
      let password = localStorage.getItem("password");
      let automaticlogin = localStorage.getItem("automaticlogin");
      if (userId && password && automaticlogin === "true") {
        this.form = { userId: userId, password: password };
        this.automaticlogin = true;
        this.loginFn();
      } else {
        this.automaticlogin = false;
      }
    },
    setLogin(obj) {
      localStorage.setItem("userId", obj.userId);
      localStorage.setItem("password", obj.password);
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(100vw / 1920);
  .boxShadow {
    position: relative;
    display: flex;
    .loginForm {
      background-size: cover;
      background-size: 100% 100%;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: start;
      .title {
        font-size: 20em;
        color: #ffffff;
        margin: 0.52vw 0 1.041vw;
      }
      .el-form-item {
        position: relative;
        margin: 0 0 1.041vw;
        font-size: calc(100vw / 1920);
        /deep/.el-input--prefix .el-input__inner {
          height: 40px;
          padding-right: 40px;
          font-size: 16px;
          text-indent: 5px;
        }
        /deep/span {
          i {
            color: #2797ff;
            font-size: 20px;
            font-weight: bold;
          }
        }
        i {
          position: absolute;
          display: block;
          width: 40px;
          height: 40px;
          top: 50%;
          transform: translatey(-50%);
          cursor: pointer;
        }
        .hidePasswordIcon {
          background-size: 56% 60%;
          right: 0;
        }
        .showPassword {
          background: url(~@/assets/imgs/login/hide.png) center no-repeat;
          background-size: 50% 50%;
        }
        .hidePassword {
          background: url(~@/assets/imgs/login/hideClose.png) center no-repeat;
          background-size: 50% 50%;
        }
        .userinput {
        }
        input:focus {
          outline: none;
        }
        input:-webkit-autofill {
          -webkit-text-fill-color: #dadbff !important;
          -webkit-text-fill-color: #ffffff;
          transition: background-color 5000s ease-in-out 0s;
        }
        a {
          text-decoration: none;
          color: #dadbff;
        }
        .loginbtn {
          display: block;
          width: 19.625vw;
          height: 2.083vw;
          line-height: 2.083vw;
          letter-spacing: 0.2vw;
          text-align: center;
          border-radius: 5px;
          background: #1890ff;
          font-size: 16px;
          background-size: 15.625vw 2.083vw;
          color: #ffffff;
        }
        .el-checkbox {
          font-size: 1em;
          ::v-deep {
            .el-checkbox__label {
              font-size: 0.729vw;
              padding-left: 0.521vw;
              line-height: 0.9896vw;
              color: #282727;
            }
            .el-checkbox__inner {
              width: 0.729vw;
              height: 0.729vw;
              font-size: 0.729vw;
              background: transparent;
              border-radius: 0;
              border-width: 0.052vw;
              &::after {
                height: 0.3645vw;
                left: 0.208vw;
                top: 0.052vw;
                width: 0.15625vw;
                border-width: 0.052vw;
              }
            }
            &.is-checked {
              .el-checkbox__inner {
                border-color: #409eff;
                background-color: #409eff;
              }
            }
          }
        }
      }
      .forgot-password {
        font-size: 14px;
        float: right;
        color: #1890ff;
        cursor: pointer;
      }
    }
  }
}
</style>
